<script lang="ts" setup>
import { imagePath, maskStyle } from '@/libs/file-utils'
import { freeList, memberList, toTest } from './data'

const title_free = imagePath('main/quiz/title-free.png')
const title_member = imagePath('main/quiz/title-member.png')
const icon_crown = imagePath('main/quiz/icon-crown.png')
const icon_arrow = imagePath('icon-arrow-dbl.svg')
</script>

<template>
  <!-- <div class="title">算盘</div> -->

  <div
    class="sub-title"
    :style="{ backgroundImage: title_free }"
  ></div>
  <div class="box free">
    <div
      v-for="(item, index) in freeList"
      :key="index"
      class="item"
      :class="item.key"
      @click="toTest(item)"
      :style="{ backgroundImage: item.frame }"
    >
      <div class="name">{{ item.name }}</div>

      <div class="go">
        开始探索
        <div
          class="arrow"
          :style="{ backgroundImage: icon_arrow }"
        ></div>
      </div>
    </div>
  </div>

  <div class="divider"></div>

  <div
    class="sub-title"
    :style="{ backgroundImage: title_member }"
  ></div>
  <div class="box member">
    <div
      v-for="(item, index) in memberList"
      :key="index"
      class="item"
      @click="toTest(item.key)"
    >
      <div
        class="frame"
        :style="{ backgroundImage: item.frame }"
      ></div>
      <div class="name">{{ item.name }}</div>

      <div class="go">
        开始探索
        <div
          class="arrow"
          :style="maskStyle(icon_arrow)"
        ></div>
      </div>

      <div
        class="icon"
        :style="{ backgroundImage: icon_crown }"
      ></div>
    </div>
  </div>
</template>

<style lang="less" scoped>
// .title {
//   color: #FFD16D;
//   font-size: 80rpx;
//   line-height: 90rpx;
//   text-align: center;
//   text-shadow: 0 2rpx 2rpx #a84ac4, 0 2rpx 2rpx #a84ac4;
// }

.sub-title {
  width: 416rpx;
  height: 188rpx;

  margin: 10rpx auto 0;
}

.divider {
  width: 686rpx;
  height: 26rpx;
  margin: 40rpx auto 0;

  border-radius: 13rpx;
  box-shadow: 0 0 10rpx 0 rgba(75, 6, 111, .21), inset 0 -8rpx 9rpx 0 rgba(119, 34, 179, .21);
}

.box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 12rpx;
  row-gap: 36rpx;

  &.free {
    filter: drop-shadow(0 8rpx 16rpx #9453C8);
  }

  .item {
    position: relative;
    width: 338rpx;
    height: 264rpx;

    &.divination {
      width: 680rpx;
    }

    .name {
      position: absolute;
      top: 146rpx;
      transform: translateY(-50%);

      width: 100%;

      color: #622D8D;
      font-size: 48rpx;
      line-height: 60rpx;
      text-align: center;
      white-space: pre-wrap;
    }

    .go {
      position: absolute;
      top: 42rpx;
      right: 48rpx;

      color: #6C3797;
      font-size: 24rpx;
      line-height: 34rpx;

      display: flex;
      align-items: center;

      .arrow {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  &.member {
    margin-bottom: 100rpx;

    filter: drop-shadow(0 8rpx 21rpx #A34EA480);

    .item {
      height: 226rpx;

      .frame {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: 338rpx;
        height: 226rpx;
      }

      .name {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: 90%;

        color: #fff;
        text-shadow: 0 0 10rpx #E5607D;
      }

      .go {
        top: 24rpx;
        right: 20rpx;

        color: #fff;

        .arrow {
          background-color: #fff;
          mask-size: 100% 100%;
        }
      }

      .icon {
        position: absolute;
        top: -54rpx;
        left: -30rpx;

        width: 110rpx;
        height: 110rpx;
      }
    }
  }
}
</style>
